<template>
  <div class="auth-nav">
    <el-header class="nav-bar">
      <div class="nav-content">
        <div class="left" @click="goBack">
          <el-icon><ArrowLeft /></el-icon>
        </div>
        <div class="title">{{ title }}</div>
      </div>
    </el-header>
  </div>
</template>

<script setup>
import { ArrowLeft } from '@element-plus/icons-vue'

defineProps({
  title: {
    type: String,
    default: '认证'
  },
  showBack: {
    type: Boolean,
    default: true
  }
})

const emit = defineEmits(['goBack'])

const goBack = () => {
  emit('goBack')
}
</script>

<style lang="scss" scoped>
.auth-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  
  .nav-bar {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    height: 60px;
    line-height: 60px;
    padding: 0;
    
    .nav-content {
      display: flex;
      align-items: center;
      height: 100%;
      
      .left {
        cursor: pointer;
        padding: 0 20px;
        
        .el-icon {
          color: #666;
          font-size: 18px;
        }
      }
      
      .title {
        color: #333;
        font-weight: 500;
        font-size: 18px;
        flex: 1;
        text-align: center;
        margin-right: 60px; // 为了保持标题居中
      }
    }
  }
}

// 移动端样式
@media (max-width: 768px) {
  .auth-nav {
    .nav-bar {
      .nav-content {
        .title {
          font-size: 16px;
          margin-right: 50px;
        }
        
        .left .el-icon {
          font-size: 16px;
        }
      }
    }
  }
}
</style> 